<template>
  <div class="app-container">
    <el-card class="card-h-100">
      <div slot="header">
        <span>资产编码规则设置</span>
        <el-button size="mini" type="primary" icon="el-icon-check" @click="onSubmit">保存</el-button>
      </div>
      <div class="code-rule-show">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="2">规则预览：</el-col>
          <div v-for="(item, index) in filter" :key="item.code">
            <el-tag type="" effect="plain" style="margin-left: 10px;">{{ item.text }}</el-tag>
            <span v-if="index < filter.length - 1">{{ connector }}</span>
          </div>
        </el-row>
      </div>
      <el-divider />
      <el-row type="flex" justify="center" align="middle" class="code-rule-body">
        <el-col :span="6">
          <el-form ref="myform" label-position="top" :model="formItem" :rules="rules" size="mini">
            <el-form-item label="流水号长度" prop="padLength">
              <el-input-number v-model="formItem.padLength" :step="1" :min="3" :max="8" />
            </el-form-item>
            <el-form-item label="连接符">
              <el-select ref="connectorSelect" v-model="formItem.connector" clearable placeholder="请选择连接符">
                <el-option v-for="item in assetCodeRuleConnector" :key="item.code" :label="item.text" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="18">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="8">
              <Kanban :key="1" :list="list1" :group="group" header-text="未选" />
            </el-col>
            <el-col :span="2">
              <div>
                <i class="el-icon-arrow-left" />
                <i class="el-icon-arrow-right" />
              </div>
              <span style="font-size: 12px">左右拖拽</span>
            </el-col>
            <el-col :span="8">
              <Kanban :key="2" :list="list2" :group="group" header-text="已选" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Kanban from '@neu/biz-core/components/Kanban'
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import {
  list,
  update,
  create
} from '@neu/dcam-ui/api/assetCodeRule'

// 定义一个表单原始项
const formItem = {
  fileds: [],
  padLength: 4,
  connector: null,
  serialNumberId: -1
}

export default {
  name: 'AssetCodeRulePage',
  components: {
    Kanban
  },
  props: {
  },
  data() {
    return {
      data: [],
      id: -1,
      assetCodeRuleConnector: [],
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {},
      connectorSelect: 'EMPTY',
      group: 'mission',
      list1: [],
      list2: []
    }
  },
  computed: {
    filter: function() {
      var filter = []
      var fileds = this.list2
      for (var i = 0; i < fileds.length; i++) {
        for (var j = 0; j < this.data.length; j++) {
          if (fileds[i].code === this.data[j].code) {
            const filterItem = {}
            filterItem.code = this.data[j].code
            filterItem.text = this.data[j].text
            filter.push(filterItem)
          }
        }
      }
      const filterItem = {}
      filterItem.code = 'PadLength'
      filterItem.text = this.formItem.padLength + ' 位流水号'
      filter.push(filterItem)
      return filter
    },
    connector: function() {
      let connector = ''
      switch (this.formItem.connector) {
        case 'EMPTY': connector = ''; break
        case 'DOT': connector = '.'; break
        case 'HYPHEN': connector = '-'; break
        case 'UNDERLINE': connector = '_'; break
      }
      return connector
    }
  },
  watch: {
    list2: {
      handler: function(newVal) {
        const formItemFileds = []
        for (let i = 0; i < this.list2.length; i++) {
          formItemFileds.push(this.list2[i].code)
        }
        this.formItem.fileds = formItemFileds
      }
    }
  },
  created() {
    findByDictionaryType('assetCodeRuleItem').then(response => {
      this.data = response.data
      list().then(response => {
        this.id = response.data[0].id
        this.formItem.fileds = response.data[0].fileds
        this.formItem.padLength = response.data[0].padLength
        this.formItem.connector = response.data[0].connector
        this.formItem.serialNumberId = response.data[0].serialNumberId

        this.initKanbanList1()
        this.initKanbanList2()
      })
    })
    findByDictionaryType('assetCodeRuleConnector').then(response => {
      this.assetCodeRuleConnector = response.data
    })
  },
  mounted() {},
  methods: {
    // 初始化看板未选列表
    initKanbanList1() {
      for (var i = 0; i < this.data.length; i++) {
        for (var j = 0; j < this.formItem.fileds.length; j++) {
          if (this.data[i].code === this.formItem.fileds[j]) {
            break
          }
        }
        if (j === this.formItem.fileds.length) {
          const item = {}
          item.name = this.data[i].text
          item.code = this.data[i].code
          this.list1.push(item)
        }
      }
    },
    // 初始化看板已选列表
    initKanbanList2() {
      for (var i = 0; i < this.formItem.fileds.length; i++) {
        for (var j = 0; j < this.data.length; j++) {
          if (this.formItem.fileds[i] === this.data[j].code) {
            const item = {}
            item.name = this.data[j].text
            item.code = this.data[j].code
            this.list2.push(item)
          }
        }
      }
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    onSubmit() {
      this.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
      })
    },
    save() {
      const updated = this.id !== -1
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            if (updated) {
              resolve(update(this.id, this.formItem))
            } else {
              resolve(create(this.formItem))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    handleChange(value, direction, movedKeys) {
      this.formItem.fileds = value
    }
  }
}
</script>

<style lang="scss" scoped>
  .code-rule-show{
    text-align: center;
  }
  .code-rule-body{
    text-align: center;
    .el-form{
      height:414px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      padding: 0 15px;
      text-align: left;
    }
    .el-transfer{
      text-align: left;
      display: inline-block;
      &-panel{ width:300px;}
    }
  }
</style>
